<template>
  <el-container class="home_content">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/logo.png" >
        <span>Vue 后台管理系统</span>
      </div>
      <el-row>
        <!-- <el-col> 你好：{{ this.$store.state.nickname }}</el-col> -->
        <i id="icon" class="el-icon-message-solid"></i>
      <el-col :span="12">
        <el-dropdown>
         <span class="el-dropdown-link">

           <i id="icon" class="el-icon-s-tools"></i>
         </span>
           <el-dropdown-menu slot="dropdown">
           <el-dropdown-item icon="el-icon-price-tag" @click.native="useInfoBox = true">个人信息</el-dropdown-item>
           <el-dropdown-item icon="el-icon-key" @click.native="setPassword = true">修改密码</el-dropdown-item>
           <el-dropdown-item @click.native="backout" icon="el-icon-switch-button">退出系统</el-dropdown-item>
           </el-dropdown-menu>
        </el-dropdown>
      </el-col>
         <el-avatar style="margin-left:0" > <img src="../assets/img/avator.jpeg"></el-avatar>
        <!-- <el-button type="info" size="mini" @click="backout">退出</el-button> -->
      </el-row>
    </el-header>
    <!-- 中间区域 -->
    <el-container>
      <!-- 左侧 -->
      <el-aside :width="isCollapse ? '54px' : '200px'">
        <div class="toggle-buttom" @click="toggleCol">|||</div>
        <el-menu
          :collapse="isCollapse"
          :collapse-transition="false"
          :default-active="activePath"
          unique-opened
          router
          background-color="#333"
          text-color="#fff"
          active-text-color="#ffd04b">
          <!-- 一级菜单 -->
          <el-submenu :index="item._id" v-for="item in menulist" :key="item.id">
            <!-- 一级菜单模板 -->
            <template slot="title" class="icon">
              <!-- 图标 -->
              <i :class=" item.icon " style="margin-left:-7px;"></i>
              <!-- 文本 -->
              <span>{{ item.navName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="'/'+item.path" @click="saveNavState('/'+item.path)" v-for="item in item.children" :key="item.id">
              <!-- 二级菜单模板 -->
              <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-menu"></i>
              <!-- 文本 -->
              <span>{{ item.name }}</span>
            </template>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>
      <!-- 个人信息弹窗 -->
      <el-dialog
        title="个人信息"
        :visible.sync="useInfoBox"
        width="40%"
        >
        <!-- 表单 -->
        <el-form  class="demo-ruleForm">
          <el-form-item class="avater">
             <el-avatar :size="150" @click.native="prePicture = true"> <img src="../assets/img/avator.jpeg"></el-avatar>
              <el-upload action="http://localhost:4000/register/:_id"><el-button size="small" type="primary">点击上传</el-button></el-upload>
          </el-form-item>
          <el-form-item label="角色" >
            <el-input v-model="user.nickname" readonly></el-input>
          </el-form-item>
          <el-form-item label="邮箱" >
            <el-input v-model="user.email" readonly></el-input>
          </el-form-item>
           <el-form-item label="创建时间" >
            <el-input v-model="user.created_time" readonly></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="useInfoBox = false">取 消</el-button>
          <el-button type="primary" @click="useInfoBox = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 预览图片 -->
      <el-dialog
        title="图片预览"
        :visible.sync="prePicture"
        width="40%"
      >
      <img src="../assets/img/avator.jpeg" style="width:100%;height:350px;">
      </el-dialog>
      <!-- 修改密码 -->
      <el-dialog
        title="修改密码"
        :visible.sync="setPassword"
        width="40%"
        @close="setPswClose"
      >
       <el-form :model="addUserFormData" ref="form" :rules="rules" label-width="80px">
        <el-form-item label="新密码"   prop="password">
          <el-input type="password" v-model.trim="addUserFormData.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password_confirm">
          <el-input type="password" v-model.trim="addUserFormData.password_confirm" placeholder="确认密码"></el-input>
        </el-form-item>
          <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="setPsw">确认</el-button>
          <el-button type="info" @click="clearForm">重置</el-button>
        </el-form-item>
       </el-form>
      </el-dialog>
      <!-- 右侧 -->
      <el-main>
        <transition name="fade-transform" mode="out-in">
          <router-view  />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.addUserFormData.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      menulist: [],
      isCollapse: false,
      activePath: '',
      user: JSON.parse(window.sessionStorage.getItem('user') || '[]'),
      useInfoBox: false,
      prePicture: false,
      setPassword: false,
      addUserFormData: {
        password: '',
        password_confirm: ''
      },
      rules: {
        password_confirm: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    backout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMenuList () {
      const menu = await this.$http.get('/list')
      this.menulist = menu.data.lise
      console.log(this.user)
    },
    toggleCol () {
      this.isCollapse = !this.isCollapse
    },
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },
    setPsw () {
      this.$refs.formRef.validate(valid => {
        if (!valid) return
        this.$message.success('修改成功')
      })
      this.setPassword = false
    },
    clearForm () {
      this.$refs.form.resetFields()
    },
    setPswClose () {

    }
  }
}
</script>

<style lang="less" scoped>
.home_content {
  height:100%;
}
.el-header {
  background:#444;
  display: flex;
  justify-content: space-between;
  padding-left:0;
  align-items: center;
  color:#eee;
  font-size:26px;
  > div {
     display: flex;
     align-items: center;
     span {
       margin-left:15px;
     }
     img {
       width:50px;
       height:50px;
       border-radius: 50%;
     }
  }
  .el-col {
    font-size:16px;
    margin-right:10px;
  }
}

.el-aside {
  background:#333;
  .el-menu {
    border-right:0;
  }
}

.el-main {
  background: #eee;
}

.toggle-buttom {
  background: #555;
  font-size: 10px;
  line-height:24px;
  color:#fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
#icon {
  font-size:26px;
  color:#eee;
}
.avater {
  text-align: center;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
// .breadcrumb-enter-active,
// .breadcrumb-leave-active {
//   transition: all .5s;
// }

// .breadcrumb-enter,
// .breadcrumb-leave-active {
//   opacity: 0;
//   transform: translateX(20px);
// }

// .breadcrumb-move {
//   transition: all .5s;
// }

// .breadcrumb-leave-active {
//   position: absolute;
// }
</style>
